<style lang="scss" scoped>
@import url('./index.scss');
</style>
<template>
  <div class="doctorBox">
    <div class="header">
      <homeTop :userimg="true"></homeTop>
    </div>
    <div class="tabing">
      <ul>
        <li
          v-for="(v, i) in tabs"
          :key="i"
          :class="active == v.id ? 'active' : ''"
          @click="clickDoctorTab(v.id)"
        >
          {{ v.departmentName }}
        </li>
      </ul>
    </div>
    <div class="con">
      <div class="conBOX">
        <div class="bigImage">
          <!-- <img :src="newData.imagePic" alt=""> -->
          <Image :dataSrc="newData.imagePic" alt=""></Image>
        </div>
        <div class="cons">
          <ul>
            <li style="display: flex; align-items: center">
              <h3>{{ newData.doctorName }}</h3>
              &emsp;&emsp;{{ newData.jobTitle }}
            </li>
            <li style="display: flex; align-items: center; justify-content: space-between">
              <span>{{ newData.inauguralHospital }}</span>
              <span>
                <van-icon
                  name="more-o"
                  color="green"
                  @click="goDetail(newData.doctorId)"
                  size="36"
                />
              </span>
            </li>
            <li>
              好评率&emsp13;{{ newData.praise }}&emsp;服务患者数&emsp13;{{ newData.servicePrice }}
            </li>
          </ul>
        </div>  
        <div class="footer">
          <div class="but">
            <h1>500H币/次</h1>
          </div>
          <el-button type="primary" @click="clickzx(newData.doctorId)">立即咨询</el-button>
        </div>
      </div>
      <!-- 下三列表 -->
      <div class="san">
        <van-icon name="arrow-left" size="22" @click="prevPage" :disabled="page <= 1"></van-icon>
        <div class="pagers">
          <dl @click="newItem(item)" v-for="(item, index) in doctorList" :key="index">
            <dt>
              <!-- <img :src="item.imagePic" alt="Image"> -->
              <Image :dataSrc="item.imagePic" alt="Image"></Image>
            </dt>
            <dd>
              <span>{{ item.doctorName }}</span>
            </dd>
          </dl>
        </div>
        <van-icon
          name="arrow"
          class="right"
          @click="nextPage"
          :disabled="page >= total"
          size="22"
        />
      </div>
      <div class="yms">
        <h3>第{{ page }}页/{{ total }}页</h3>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getgord } from '../../api'
import { request } from '../../axios/request'
import { useRoute, useRouter } from 'vue-router'
import homeTop from '../../components/homeTop/index.vue'
import Image from '../../components/image/index.vue'
const route = useRoute()
const router = useRouter()
const IMages = ref([])

const id = ref(localStorage.getItem('oid'))
console.log(id.value, 'idididid')
// 获取问诊数据
let deptId = ref(2)
// route.query.departmentId
if (route.query.departmentId) {
  deptId.value = Number(route.query.departmentId)
}
let condition = ref(1)
let page = ref(1)
let count = ref(3)
let total = ref(8)
// console.log(deptId.value)
const newData = ref()

const prevPage = () => {
  if (page.value > 1) {
    page.value--
    getList()
  }
}
const nextPage = () => {
  if (page.value < total.value) {
    page.value++
    getList()
  }
}
const doctorName:any = ref('')
const newItem = (item: any) => {
  console.log(item, 'ppp')
  newData.value = item
  // IMages.value = item.imagePic
  // console.log(IMages.value);
  localStorage.setItem('doctorId', item.doctorId)
  doctorName.value = item.doctorName
  console.log(doctorName.value, 'doctorName')
}

// tab渲染标签
const tabs: any = ref([])
const active: any = ref(id)
const gettab = async () => {
  const res = await getgord()
  console.log(res, '123')
  tabs.value = res.data.result
}
gettab()

// 点击立即咨询
const clickzx = async (doctorId: number) => {
  //  useRouter.push('/chat')
  await request
    .put(
      '/api/health/user/inquiry/verify/v1/consultDoctor',
      {
        doctorId: doctorId as number
      },
      {
        headers: {
          userId: userId.value as number,
          sessionId: sessionId.value as string,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      console.log(res.data, '点击问诊')
      router.push({
        path: '/chat',
        query: {
          doctorName: doctorName.value
        }
      })
    })
}
// 点击切换tab
const clickDoctorTab = (id: number) => {
  console.log(id, 'ID')
  active.value = id
  deptId.value = id
  page.value = 1
  getList()
}

// 拿取userId, sessionId
const userId = ref(JSON.parse(localStorage.getItem('userId')|| '') )
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId')|| '') )

// 点击问诊
const handleInq = async (doctorId: any) => {
  await request
    .put(
      '/api/health/user/inquiry/verify/v1/consultDoctor',
      {
        doctorId: doctorId
      },
      {
        headers: {
          userId: userId.value as number,
          sessionId: sessionId.value as string,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      console.log(res.data, '点击问诊')
    })
}

// 医生详情
const goDetail = (doctorId: number) => {
  router.push({
    path: '/inqDetail',
    query: {
      doctorId: doctorId
    }
  })
}

// 获取医生数据
const doctorList: any = ref([])

const getList = async () => {
  await request
    .get('/api/health/user/inquiry/v1/findDoctorList', {
      params: {
        deptId: deptId.value,
        condition: condition.value,
        page: page.value,
        count: count.value
      }
    })
    .then((res) => {
      console.log(res.data.result, 'ppp')
      let { result, status } = res.data

      if (status === '0000') {
        doctorList.value = result
        // console.log(doctorList.value[0].doctorId, '医生列表');
        newData.value = doctorList.value[0]
        IMages.value = doctorList.value[0].imagePic
        console.log(doctorList.value, '医生列表')
      }
    })
}
getList()
</script>
